<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>孙玉超个人博客-留言板</title>
    <meta name="Description" content="给博主留言" />
    <meta name="Keywords" content="个人博客,Java技术，Java学习" />
    <link href="https://www.sunyuchao.com/static/css/fontawesome4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/layui/css/layui.css" rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/css/common.css" rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/css/reply.css" rel="stylesheet">
    <script th:src="${iconfontUrl}"></script>
    <style>

        .content{margin: 0 auto;width: 62%;padding: 2px;margin-top: 20px;}
        .content-left{width: 68%;background-color: white;float: left;padding: 22px;}
        .content-left .floor{font-weight: 600;}
        .content-left .reply-all-head{font-size: 18px;font-weight: bold;}

        .content-right{width: 27%;float: right;}
        .content-right .right-card{background-color: white;padding-bottom: 10px;margin-top: 20px;}
        .content-right .right-card:first-child{margin-top: 0;}
        .content-right .square{padding: 5px;margin:0 auto;margin-bottom: 10px;position: relative;border-bottom: 1px solid #e7e7e7;
            padding-bottom: 15px;width: 90%;padding-top: 12px;color:#526163;font-weight: bold;}
        .content-right .square::after {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2.5px!important;
            width: 100px;
            background-color: #51aded;
            content: '';
            transition:width 1s;
            -moz-transition:width 1s; /* Firefox 4 */
            -webkit-transition:width 1s; /* Safari and Chrome */
            -o-transition:width 1s; /* Opera */
        }
        /*最新公告*/
        .notice{padding-bottom: 20px;}
        .notice li{padding: 8px 15px 6px 25px;border-radius: 4px;margin-top: 8px;margin-left: 10px;position: relative;width: 80%;transition: all .5s}
        .notice li:hover{box-shadow: 0 0 10px blue;}
        .notice li span{float: right;margin-right: 5px;}
        .notice li a{display: inline-block;text-overflow:ellipsis;width: 65%;overflow: hidden;white-space:nowrap;}
        .notice li:before {
            position: absolute;
            content: "";
            width: 3px;
            height: 3px;
            background: #000;
            border-radius: 50%;
            left: 10px;
            top: 17px;
        }

        /*鼠标悬停div修改子元素样式*/
        .content-right > div:hover .square:first-child::after{
            width: 200px;
        }
        .skill-label li{float: left;margin:4px 6px;}
        .skill-label li a{font-family: Arial, Helvetica, sans-serif;}
        .comment,.commented{font-weight: 600;}

        .mycard{padding-bottom: 0;position: relative;}
        .mycard-fill{height: 80px;background-color: #00FFFF;}
        .mycard-bottom{height: 140px;padding-top: 50px;}
        .mycard-bottom h2{text-align: center;font-size: 18px;font-weight: 600;}
        .mycard-bottom p{width: 85%;margin: 0 auto;margin-top: 10px;}
        .myavatar{position: absolute;top: 40px;left: 120px;border-radius: 50%;}
        @media screen and (max-width: 1366px) {
            .content {
                width: 88%;
            }

        }

        /*手机*/
        @media screen and (max-width: 980px) {
           .content-left{padding: 15px;}
            .myavatar{width: 60px;height: 60px;left: 86px;top: 30px;}
            .smb-right{width:88%;}
            .content-right .right-card{max-height: 220px;overflow: hidden;}
            .skill-label li a{height: 25px;}

            .mycard-fill{height: 60px;}
            .mycard-bottom{padding-top: 45px;}
            .mycard-bottom h2{font-size: 16px;font-weight: 600;}
            .mycard-bottom p{font-size: 12px;}
        }

        /*图片点击*/
        .enlargeImg_wrapper {display: none;position: fixed;z-index: 999;top: 0;right: 0;bottom: 0;left: 0;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-color: rgba(52, 52, 52, 0.8);background-size: 50%;
        }
        .enlargeImg{position: absolute;top: 40px;left: 120px;border-radius: 50%;}
        .enlargeImg:hover {cursor: zoom-in;}
        .zoomOut:hover {cursor: zoom-in;}
        .enlargeImg_wrapper:hover {cursor: zoom-out;}
    </style>
</head>
<body>
<!--搜索-->
<div th:replace="index :: search"></div>
<!--右下角固定-->
<div th:replace="index :: permanent"></div>

<div class="top">
    <div class="top-center">
        <div class="top-center-l">
            <img  th:src="${logoUrl}">
        </div>
        <div class="top-center-c">
            <ul class="nav">
                <li><a href="/">首&nbsp;&nbsp;页</a></li>
                <li><a href="/learning">爱学习</a></li>
                <li><a href="/life">微动态</a></li>
                <li th:replace="index :: onlineutils"></li>
                <li><a href="/aboutme">关于我</a></li>
                <li class="nav-this"><a href="javascript:;">留言板</a></li>
            </ul>
        </div>
        <div th:replace="index :: top-center-r" class="top-center-r"></div>
    </div>
</div>

<!--考虑重做评论-->

<div class="content">
    <div class="content-left">
        <div th:fragment="messageBox" class="save-message-box">
            <div class="smb-left">
                <img th:if="${session.loginUser == null}" class="radius" src="https://www.sunyuchao.com/static/images/default_icon.jpg" width="50" height="50">
                <img th:if="${session.loginUser != null}" class="radius" width="50" height="50" th:src="${session.loginUser.avatar}">
            </div>
            <div class="smb-right">
                <div contenteditable="true" class="layui-textarea" placeholder=""></div>
                <div class="smb-r-bottom">
                    <a onclick="loadFace(this)" href="javascript:;"><img src="https://www.sunyuchao.com/static/layui/images/face/1.gif"></a>
                    <div class="face-frame"></div>
                    <button onclick="msgToMe(this)" class="layui-btn layui-btn-normal" style="float: right;margin-right: 8px;">留言</button>
                </div>
            </div>
        </div>
        <h2 class="reply-all-head">所有回复</h2>

        <ul id="message-comment-body" th:fragment="comment" style="margin-top: 10px;">
            <li th:each="first : ${firstList}" class="item">
                <div class="item-left">
                    <img class="radius" th:src="${first.avatar}" width="50" height="50">
                </div>
                <div class="item-right">
                    <div>
                        <h5 style="float: left;">
                            <a href="javascript:;" class="floor" th:text="${first.username}"></a>
                        </h5>
                        <span style="float: right;" class="timeago" th:datetime="${#dates.format(first.dateInsert, 'yyyy-MM-dd HH:mm:ss')}"></span>
                    </div>
                    <p class="reply-content" th:utext="${first.content}"></p>
                    <p class="operate">
                        <span class="muted"> <a class="show" onclick="show(this)" href="javascript:;">展开</a>(<span th:text="${first.childrenList.size()}"></span>)</span>
                        <span class="muted"> <a onclick="openReply(this)" href="javascript:;">回复</a></span>
                        <span class="muted"> <a href="#"><i class="layui-icon layui-icon-praise"></i>17</a></span>
                        <span class="muted"> <a href="#"><i class="layui-icon layui-icon-tread"></i>17</a></span>
                    </p>

                    <div class="msg-content">
                        <div th:each="child : ${first.childrenList}" class="msg-history">
                            <div class="mh-left">
                                <img class="radius" th:src="${child.avatar}" width="40" height="40">
                            </div>
                            <div class="mh-right">
                                <input type="hidden" class="userId" th:value="${child.userId}">
                                <div>
                                    <h5 style="float: left;">
                                        <span><a href="javascript:;" class="comment" th:text="${child.username}">某某</a></span> 回复
                                        <span><a class="commented" href="javascript:;" th:text="${child.commentedUserName}">某某</a></span>
                                    </h5>
                                    <span style="float: right;" class="timeago" th:datetime="${#dates.format(child.dateInsert, 'yyyy-MM-dd HH:mm:ss')}"></span>
                                </div>
                                <p class="reply-content" th:utext="${child.content}"></p>
                                <p class="operate">
                                    <span class="muted"> <a onclick="openChildReply(this)" href="javascript:;">回复</a></span>
                                </p>
                            </div>
                            <hr>
                        </div>
                        <div class="layui-clear"></div>

                    </div>

                    <div class="item-child-smbx">
                        <input type="hidden" class="receiverUserId" th:value="${first.userId}">
                        回复 <span class="receiver">某某</span>
                        <div contenteditable="true" class="layui-textarea" placeholder=""></div>
                        <div class="smb-r-bottom">
                            <a onclick="loadFace(this)" href="javascript:;"><img src="/layui/images/face/1.gif"></a>
                            <div class="face-frame"></div>
                            <button  th:onclick="'saveMsg(this,'+${first.id}+')' "  class="layui-btn layui-btn-normal" style="float: right;margin-right: 8px;">留言</button>
                        </div>
                    </div>

                </div>
                <div class="layui-clear"></div>
            </li>

        </ul>
        <div class="layui-btn-container" style="margin-top: 20px;">
            <a th:href="@{/message(page=${page-1})}" th:class="${page == 1 ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-left"></i></a>
            <a th:href="@{/message(page=${num})}" th:class="${num == page ? 'layui-btn layui-btn-normal':'layui-btn'}" th:each="num : ${pageNumList}" th:text="${num}"></a>
            <a th:href="@{/message(page=${page+1})}" th:class="${page == pageTotal ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-right"></i></a>
        </div>
    </div>

    <div class="content-right">
        <div class="right-card mycard">
            <img class="myavatar zoomOut" th:src="${card.avatar}" width="80" height="80">
            <div class="mycard-fill"></div>
            <div class="mycard-bottom">
                <h2 th:text="${card.nickname}">暮色妖娆</h2>
                <p th:text="${card.introduction}"></p>
            </div>

        </div>
        <div class="right-card">
            <h3 class="square" style="margin-bottom: 8px;">热门标签</h3>
            <div>
                <ul class="skill-label" id="hot-tag-box">
                    <li th:each="tag : ${hotTagList}"><a class="layui-btn layui-btn-sm layui-btn-radius" th:data-id="${tag.id}" th:text="${tag.name}"></a></li>
                </ul>
            </div>
            <div class="layui-clear"></div>
        </div>

        <div class="right-card">
            <h3 class="square">在线工具</h3>
            <div>
                <ul class="notice">
                    <li th:each="util : ${onlineUtilsList}"><a th:href="@{http://onlineutils.sunyuchao.com__${util.url}__(bindId=${util.id})}"> [[${util.title}]]</a><span class="timeago" th:datetime="${#dates.format(util.dateInsert, 'yyyy-MM-dd')}"></span></li>
                </ul>
            </div>

        </div>
        <div class="right-card">
            <h3 class="square">如何搭建个人博客</h3>
            <div style="position: relative;">
                <p style="width: 90%;margin: 0 auto;text-indent: 2em;" th:utext="${howBuildBlogDesc}"></p>

                <a style="float: right;margin-right: 10px;" href="/article/13" class="layui-btn layui-btn-normal">如何建立个人博客？>></a>
                <div class="layui-clear"></div>
            </div>

        </div>

    </div>
</div>
<div class="footer">
    <p><a href="https://beian.miit.gov.cn/">Design by：暮色妖娆丶 备案号：皖ICP备19018192号-1</a></p>
</div>


<script src="https://www.sunyuchao.com/static/js/heart.js"></script>
<script src="https://www.sunyuchao.com/static/layui/layui.js"></script>
<script src="https://www.sunyuchao.com/static/js/reply.js"></script>
<script src="https://www.sunyuchao.com/static/js/jquery3.3.1.min.js"></script>
<!--子回复模板-->
<script type="text/template" id="childMsg">
    <div class="msg-history">
        <div class="mh-left">
            <img class="radius" src="{avatar}" width="40" height="40">
        </div>
        <div class="mh-right">
            <input type="hidden" class="userId" value="{userId}">
            <p>
                <span style="float: left;"><span><a class="comment" href="javascript:;">{commentUsername}</a></span> 回复  <span>
                    <a href="javascript:;" class="commented">{commentedUsername}</a></span></span>
                <span class="timeago" style="float: right;" datetime="{time}"></span>
            </p>
            <p class="reply-content">
                {content}
            </p>
            <p class="operate">
                <span class="muted"> <a onclick="openChildReply(this)" href="javascript:;">回复</a></span>
            </p>
        </div>
        <hr>
    </div>
    <div class="layui-clear"></div>
</script>
<!--1级回复模板-->
<script type="text/template" id="FirstMsg">
    <li class="item">
        <div class="item-left">
            <img class="radius" src="{avatar}" width="50" height="50">
        </div>
        <div class="item-right">
            <p>
                <span style="float: left;"><a href="javascript:;" class="floor">{commentUsername}</a></span>
                <span style="float: right;" class="timeago" datetime="{time}"></span>
            </p>
            <p class="reply-content">
                {content}
            </p>
            <p class="operate">
                <span class="muted"> <a class="show" onclick="show(this)" href="javascript:;">展开</a>(<span>0</span>)</span>
                <span class="muted"> <a onclick="openReply(this)" href="javascript:;">回复</a></span>
                <span class="muted"> <a href="#"><i class="layui-icon layui-icon-praise"></i>17</a></span>
                <span class="muted"> <a href="#"><i class="layui-icon layui-icon-tread"></i>17</a></span>
            </p>
            <div class="msg-content">

            </div>
            <div class="item-child-smbx">
                <input type="hidden" class="receiverUserId" value="{commentId}">
                回复 <span class="receiver">{commentUsernameCopy}</span>
                <div contenteditable="true" class="layui-textarea" placeholder=""></div>
                <div class="smb-r-bottom">
                    <a onclick="loadFace(this)" href="javascript:;"><img src="https://www.sunyuchao.com/static/layui/images/face/1.gif"></a>
                    <div class="face-frame"></div>
                    <button onclick="saveMsg(this)" class="layui-btn layui-btn-normal" style="float: right;margin-right: 8px;">留言</button>
                </div>
            </div>

        </div>
        <div class="layui-clear"></div>
    </li>
</script>

<script th:inline="javascript">
    var loginUser=[[${session.loginUser}]];
    var loginUserId;
      if(loginUser != null){
          loginUserId=loginUser.id;
      }
</script>

<script>

    layui.config({base:'https://www.sunyuchao.com/static/layui/extends/'});
    layui.use(['element','layer','timeago'], function(){
        var element = layui.element,
            layer=layui.layer,
            timeago = layui.timeago,
            $ = layui.jquery;
        timeago.render($('.timeago'));

        $("#hot-tag-box li a").click(function () {

            var id = $(this).attr("data-id");
            document.write("<form action='/learning' method='post' name='form1' style='display:none'>");
            document.write("<input type='hidden' name='page' value='"+1+"'>");
            document.write("<input type='hidden' name='parentId' value='"+id+"'>");
            document.write("</form>");
            document.form1.submit();
        });
    });

    $(function () {

        //图片点击

        $(document).on('click','.enlargeImg,.zoomOut',function(){
            $(this).after("<div οnclick='closeImg()' class='enlargeImg_wrapper'></div>");
            var imgSrc = $(this).attr('src');
            $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
            $('.enlargeImg_wrapper').fadeIn(200);
        });
        $(document).on('click','.enlargeImg_wrapper',function(){
            $('.enlargeImg_wrapper').fadeOut(600);
        });

        $(document).on("keypress", ".layui-textarea", function (e) {
            if (e.keyCode == 8) {
                return true;
            } else {
                var len = 150;
                if(this.innerHTML.length > len){
                    alert("评论不得超过150个字符");
                    return false;
                }
            }
            return true;
        });
        //粘贴
        $(document).on("paste", ".layui-textarea", function () {
            var len =150;
            var total = this.innerHTML.length + event.clipboardData.getData('Text').length;
            if(total > len) {
                alert("评论不得超过150个字符");
                return false;
            }
            return true;
        });

    });
    /**
     * 留言给我
     * */
    function msgToMe(obj) {
        var frameObj = $(obj).parent().prev();
        var replyEntity={};
        replyEntity.content = $(frameObj).html().replace(/&nbsp;/ig,'');//回复内容
        replyEntity.commentedUserId=1;//被回复者默认是我（生产中放到后台）
        replyEntity.level = 1;
        replyEntity.userId=loginUserId;
        var retInfo={};
        var flag=false;
        $.ajax({
            url:"/userComment/saveFirstMessage",
            type:"POST",
            data:replyEntity,
            async:false,
            success:function (e) {
                if(e.success){
                    retInfo=e.data;
                    flag=true;
                }else{
                    layui.layer.alert(e.message);
                }
            },dataType: "json"
        });
        //校验
        if(!flag){
            return;
        }
        var html=$("#FirstMsg").html();
        var arr = [];
        arr.push(formatTemplate(retInfo, html));
        $(".content-left ul").prepend(arr.join(''));
        $(frameObj).html("");//清空文本域
        layui.timeago.render($('.timeago'));
    }


    /**
     * 保存评论
     * */
    function saveMsg(obj,parentId){

        //获取回复信息
        var frameObj = $(obj).parent().prev();
        var msg = $(frameObj).html().replace(/&nbsp;/ig,'');;//回复信息
        var receiver = $(obj).parent().parent().children(".receiver");
        var receiverUserId = $(obj).parent().parent().children(".receiverUserId");
        var commented = $(receiver).html();
        var commentedId = $(receiverUserId).val();
        var replyEntity={};
        replyEntity.userId=loginUserId;
        replyEntity.commentedUserId=commentedId;
        replyEntity.content=msg;
        replyEntity.level=2;
        replyEntity.parentId=parentId;
        var flag=false;
        var retInfo={};
        $.ajax({
            url:"/userComment/saveChildrenMessage",
            type:"POST",
            data:replyEntity,
            async:false,
            success:function (e) {
               if(e.success){
                   retInfo=e.data;
                   flag=true;
               }else{
                   layui.layer.alert(e.message);
               }
            },dataType:"json"
        });
        //校验
        if(!flag){
            return;
        }
        var prev = $(obj).parent().parent().prev();
        if($(prev).is(":hidden")){
            $(prev).show();
        }

        var html = $("#childMsg").html();
        var arr = [];
        arr.push(formatTemplate(retInfo, html));
        $(prev).append(arr.join(''));//追加回复信息
        var show = $(obj).parent().parent().prev().prev().find(".show");//展开按钮
        $(show).html("关闭");

        $(frameObj).html("");//清空回复框
        layui.timeago.render($('.timeago'));
    }



    //随机颜色
    var colorArr=["#ffda79","#1E9FFF","#fab1a0","#74b9ff","#e84393","#00b894","#67ace0","#255d88","#FFB800","#ffda79","#1E9FFF","#fab1a0","#74b9ff","#e84393","#00b894","#67ace0","#255d88","#FFB800"];
    $(".skill-label li a").each(function () {
        var number = Math.floor(Math.random()*(colorArr.length - 1));
        $(this).css("background-color",colorArr[ number]);
        delete colorArr[ number];
        colorArr=colorArr.filter(function (e) {
            return e;
        });
    });


</script>
<script src="https://www.sunyuchao.com/static/js/common.js"></script>
</body>
</html>
